<template>
    <!-- 父传子 -->
    <h1>父传子</h1>
    <div>子组件得到的值是：<span class="textColor">{{ info }}</span></div>

    <!-- 子传父（点击事件） -->
    <button @click="clickChild" class="marginTop">子传父</button>

    <!-- defineExpose导出 -->
    <p>性别:{{ sex }}</p>
    <p>爱好:{{ userInfo.like }}</p>
</template>

<script lang="ts" setup>
import { toRefs, reactive, ref } from 'vue'
const props = defineProps({
    //子组件接收父组件传递过来的值
    info: {
        type: String,
    },
})
//使用父组件传递过来的值
const { info } = toRefs(props)


const emit = defineEmits(['clickChild'])
const clickChild = () => {
    let param = {
        content: '子传父（点击事件）'
    }
    //传递给父组件
    emit('clickChild', param)
}


let sex = ref('男')
const userInfo = reactive({
    like: '王者荣耀',
    age: 18
})

defineExpose({ sex, userInfo })
</script>

<style lang="scss" scoped>
.textColor {
    color: #00bd7e;
}

.marginTop {
    margin-top: 50px
}
</style>